import React, { useState, useEffect } from 'react'
import html2canvas from 'html2canvas'
import PrintScreen from './components/Html2Canvas'
import SocketChat from './components/SocketChat'

class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      number: 0
    }
  }
  handerClick = () => {
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        this.setState({ number: this.state.number + 1 })
        console.log(this.state.number)
      }, 1000)
    }
  }

  componentDidMount() {}

  render() {
    return (
      <div>
        <button onClick={this.handerClick}>num++</button>

        <SocketChat />

        <Index></Index>
        <PrintScreen />
      </div>
    )
  }
}

function Index() {
  const [num, setNumber] = React.useState(0)
  const handerClick = () => {
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        setNumber(num + 1)
        console.log(num)
      }, 1000)
    }
  }
  return <button onClick={handerClick}>{num}</button>
}

export default App
